const path = require('path');
const Timestamp = new Date().getTime();
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  // lintOnSave: false,
  // 生产环境 sourceMap
  productionSourceMap: false,
  // 配置线上访问的前置目录
  publicPath: process.env.VUE_APP_PUBLIC_PATH,
  // 打包的文件夹名
  outputDir: process.env.VUE_APP_OUTPUT_DIR,
  // 放置生成的静态资源js css img的文件夹
  assetsDir: 'static',
  // 指定生成的html入口文件路径
  indexPath: 'index.html',
  //生成的静态资源在它们的文件名中是否包含hash以便更好的控制缓存
  filenameHashing: true,
  css: {
    sourceMap: true //打开本地开发环境下的sourceMap
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', path.join(__dirname, 'src')) //项目别名设置
      .set('@api', path.join(__dirname, 'src/api'))
      .set('@pages', path.join(__dirname, 'src/pages'))
      .set('@assets', path.join(__dirname, 'src/assets'))
      .set('@components', path.join(__dirname, 'src/components'))
      .set('@store', path.join(__dirname, 'src/store'))
      .set('@utils', path.join(__dirname, 'src/utils'));

    // 静态文件-css打包版本控制
    let miniCssExtractPlugin = new MiniCssExtractPlugin({
      filename: `static/css/[name].[contenthash:8].${Timestamp}.css`,
      chunkFilename: `static/css/[name].[contenthash:8].${Timestamp}.css`
    });
    config.plugin('extract-css').use(miniCssExtractPlugin);
    // 静态文件-图片打包版本控制
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader')
      .loader('file-loader')
      .options({
        name: `static/img/[name].[hash:8].${Timestamp}.[ext]`
      });
  },
  configureWebpack: config => {
    // 静态文件-js打包版本控制
    config.output.filename = `static/js/[name].[hash:8].${Timestamp}.js`;
    config.output.chunkFilename = `static/js/[name].[hash:8].${Timestamp}.js`;
  },
  devServer: {
    port: 8082,
    proxy: {
      '/finance-customer': {
        target: 'https://customer.51koudaiwang.com/finance-customer', //测试
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/finance-customer': ''
        }
      }
    }
  }
};
